<script setup lang="ts">
import {ref} from "vue";
import type {Movie} from "@/interfaces/movie-list"
import type {MovieSession, PageMovieSessionReqVO, PageMovieSessionRespVO} from "@/interfaces/movie-session";
import {onLoad, onShow} from "@dcloudio/uni-app";
import {useMovieDetailApi, usePageMovieSessionByIdApi} from "@/services/api";
import type {MovieDetailReqVO, MovieDetailRespVO} from "@/interfaces/movie";
import type {Page} from "@/interfaces/base";
// interface propsInterface{
//   movie:Movie;
// }
// const {movie} = defineProps<propsInterface>()
const movieDetailReq = ref<MovieDetailReqVO>({
  id: 0
})
const pageMovieSessionReq = ref<PageMovieSessionReqVO>({
  size: 10,
  current: 1,
  id:0
})
const movieSessionTableData = ref<Page<PageMovieSessionRespVO>>({
  list: [],
  total: 0
})
const movie = ref<MovieDetailRespVO>({
  actors: "",
  chineseName: "",
  duration: "",
  englishName: "",
  id: 0,
  images: "",
  movieLanguage: "",
  releaseTime: "",
  score: "",
  type: ""
})
const goChooseSeat = (id: number): void => {
  uni.navigateTo({
    url: "/pages/movie/choose-seat?id=" + id +"&movieId="+movie.value.id
  })
}
/**
 * 初始化函数
 */
const init = async () => {
  const {data: res} = await useMovieDetailApi(movieDetailReq.value)
  const {data: page} = await usePageMovieSessionByIdApi(pageMovieSessionReq.value)
  movie.value = res
  movieSessionTableData.value = page
}
onShow(()=>{
  init()
})
onLoad(({id}) => {
  movieDetailReq.value.id = id
  pageMovieSessionReq.value.id = id
  init()
})
</script>

<template>
  <view class="container">
    <view class="movie-info">
      <view class="movie-image">
        <up-image
            :show-loading="true"
            :src="movie.images"
            width="130rpx"
            height="260rpx"
            mode="heightFix"
            radius="24rpx"
        ></up-image>
      </view>
      <view class="movie-content">
        <view class="movie-name">
          {{ movie.chineseName }}
        </view>
        <view class="movie-e-name">
          {{ movie.englishName }}
        </view>
        <view class="movie-type">
          {{ movie.type }}
        </view>
        <view class="movie-actor">
          <up-text :text="'主演：' + movie.actors" :lines="2" wordWrap="anywhere" size="24" color="#cbcbcb"></up-text>
        </view>
        <view class="movie-score">
          评分：{{ movie.score }}
        </view>
      </view>
    </view>
    <view class="movie-session">
      <view class="session-list">
        <u-list>
          <u-list-item
              v-for="(session, index) in movieSessionTableData.list"
              :key="index"
          >
            <view class="session">
              <view class="session-left">
                <view class="session-time">
                  <view class="start-time">
                    {{ session.startTime.split(" ")[1] }}
                  </view>
                  <view class="end-time">
                    {{ session.endTime.split(" ")[1] }}
                  </view>
                </view>
                <view class="session-otherInfo">
                  <view class="session-format">
                    {{ session.format }}
                  </view>
                  <view class="session-cinema">
                    {{ session.cinemaName }}
                  </view>
                </view>
              </view>
              <view class="session-right">
                <view class="ticket-price">
                  ￥{{ session.price }}
                </view>
                <view class="handle-button">
                  <up-button
                      type="error"
                      shape="circle"
                      customStyle="background-color:#7D8BAE"
                      :plain="true"
                      text="购票"
                      @click="goChooseSeat(session.id)"></up-button>
                </view>
              </view>
            </view>
            <u-line color="#ffffff"></u-line>
          </u-list-item>
        </u-list>
      </view>
    </view>
  </view>
</template>

<style scoped>
.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #45496A;
}

.movie-info {
  display: flex;
  flex-direction: row;
  background-color: #45496A;
  height: 340rpx;
}

.movie-image {
  padding: 20rpx;
  flex: 1;
}

.movie-content {
  padding: 20rpx;
  flex: 3;
}

.movie-name {
  font-size: 42rpx;
  color: #ffffff;
  font-weight: bold;
}

.movie-e-name {
  font-size: 24rpx;
  color: #cbcbcb;
}

.movie-actor, .movie-type {
  font-size: 28rpx;
  color: #cbcbcb;
}

.movie-score {
  font-size: 28rpx;
  color: #ffa321;
}

.movie-content > view {
  margin-bottom: 15rpx;
}

.movie-session {
  background-color: #7D8BAE;
  border-radius: 24rpx;
  padding: 24rpx;
}

.session {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.session-left {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

.session-time, .session-otherInfo {
  display: flex;
  flex-direction: column;
  padding: 20rpx;
  align-items: center;
  margin-right: 20rpx;
}

.start-time, .session-format {
  font-size: 32rpx;
  color: #ffffff;
}

.end-time, .session-cinema {
  font-size: 28rpx;
  color: #555555;
}

.session-right {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  gap: 30rpx;
}

.ticket-price {
  color: #E5857B;
  font-size: 32rpx;
}
</style>